// Colors
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;
$info-color: #1890ff;

$text-color: rgba(0, 0, 0, 0.85);
$text-color-secondary: rgba(0, 0, 0, 0.45);
$disabled-color: rgba(0, 0, 0, 0.25);
$border-color: #d9d9d9;
$box-shadow-color: rgba(0, 0, 0, 0.15);

// Typography
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-sm: 12px;

// Layout
$header-height: 64px;
$sidebar-width: 256px;
$content-padding: 24px;

// Border radius
$border-radius-base: 2px;
$border-radius-sm: 2px;
$border-radius-lg: 4px;

// Spacing
$spacing-unit: 8px;
$spacing-xs: $spacing-unit;
$spacing-sm: $spacing-unit * 2;
$spacing-md: $spacing-unit * 3;
$spacing-lg: $spacing-unit * 4;
$spacing-xl: $spacing-unit * 5;

// Z-index
$zindex-dropdown: 1050;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
$zindex-popover: 1060;
$zindex-tooltip: 1070;

// Breakpoints
$screen-xs: 480px;
$screen-sm: 576px;
$screen-md: 768px;
$screen-lg: 992px;
$screen-xl: 1200px;
$screen-xxl: 1600px;

// Animation
$animation-duration-base: 0.2s;
$animation-duration-slow: 0.3s;
$animation-duration-slower: 0.45s;
$animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);

// Media queries
$media-xs: "(max-width: #{$screen-xs})";
$media-sm: "(min-width: #{$screen-sm})";
$media-md: "(min-width: #{$screen-md})";
$media-lg: "(min-width: #{$screen-lg})";
$media-xl: "(min-width: #{$screen-xl})";
$media-xxl: "(min-width: #{$screen-xxl})";

// 文字颜色
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #C0C4CC;

// 边框颜色
$border-base: #DCDFE6;
$border-light: #E4E7ED;
$border-lighter: #EBEEF5;
$border-extra-light: #F2F6FC;

// 背景颜色
$background-base: #F5F7FA;
$background-white: #FFFFFF;

// 布局相关
$navbar-height: 50px;

// 字体大小
$font-size-extra-large: 20px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size-extra-small: 12px;

// 圆角
$border-radius-circle: 50%;

// 阴影
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);

// 过渡动画
$transition-base: all .3s;
$transition-fade: opacity .3s;
$transition-slide: transform .3s;

// z-index管理
$z-index-normal: 1;

// 导出变量给JavaScript使用
:export {
  primaryColor: $primary-color;
  successColor: $success-color;
  warningColor: $warning-color;
  dangerColor: $error-color;
  infoColor: $info-color;
  sidebarWidth: $sidebar-width;
  headerHeight: $header-height;
} 